<template>
  <div class="nva_menu_container">
    <div class="container" v-loading="loading">
      <p class="title">考场编排管理</p>
      <a :href='GLOBAL.COMMON+ "/organize/export/organizationData/byPointId?pointId="+ activeItem' class="print">打印编排</a>
      <div v-for="(item,idex) in kaodian" :key="idex" class="exam-container">
        <div class="exam-info">
          <p>
            <span>考点：{{school}}</span>
            <span>考试日期：{{item.date}}</span>
            <span>总计：{{item.examineeInfo}}</span>
            <a href="javascrit:;" v-if="item.show" @click="item.show = false">收起</a>
            <a href="javascrit:;" v-else @click="item.show = true">展开</a>
          </p>
        </div>
        <table v-if="item.show" class="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0">
          <thead>
            <tr>
              <td>批次</td>
              <td>候考时间</td>
              <td>考试时间</td>
              <td>考场号</td>
              <td>准考证号区间</td>
              <td>学校</td>
              <td>人数</td>
              <td>监考老师</td>
            </tr>
          </thead>
          <tbody  v-for="(k,i) in item.batchData" :key="i">
            <tr>
              <td :rowspan="k.roomData.length">{{k.batch}}</td>
              <td :rowspan="k.roomData.length">{{k.waitTime}}</td>
              <td :rowspan="k.roomData.length">{{k.examTime}}</td>
              <td>{{getAttr(k.roomData[0] ,'roomCode')}}</td>
              <td>{{getAttr(k.roomData[0] ,'admissionRange')}}</td>
              <td>{{getAttr(k.roomData[0] ,'schoolsName')}}</td>
              <td>{{getAttr(k.roomData[0] ,'examineeNum')}}</td>
              <td>{{getAttr(k.roomData[0] ,'staffInvigilate')}}</td>
            </tr>
            <tr v-for="(p,pi) in k.roomData.length-1" :key="pi">
              <td>{{getAttr(k.roomData[pi+1] ,'roomCode')}}</td>
              <td>{{getAttr(k.roomData[pi+1] ,'admissionRange')}}</td>
              <td>{{getAttr(k.roomData[pi+1] ,'schoolsName')}}</td>
              <td>{{getAttr(k.roomData[pi+1] ,'examineeNum')}}</td>
              <td>{{getAttr(k.roomData[pi+1] ,'staffInvigilate')}}</td>
            </tr>
          </tbody>
          <tbody v-if="!item.batchData.length">
            <tr>
              <td colspan="8">
                暂无数据
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      kaodian: [],
      school: '',
      loading: false,
      activeItem: 0
    }
  },
  methods: {
    async initData () {
      this.loading = true
      let list = await this.$http.getArea()
      if (list.code === 20000) {
        let obj = list.data.child
        for (let j = 0; j < obj.length; j++) {
          if (obj[j].areaName === sessionStorage.getItem('countyName')) {
            for (let p = 0; p < obj[j].child.length; p++) {
              if (obj[j].child[p].areaName === sessionStorage.getItem('schoolName')) {
                this.activeItem = obj[j].child[p].id
              }
            }
          }
        }
        let res = await this.$http.searchMatically({
          pointAreaId: this.activeItem
        })
        if (res.code === 20000) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].show = true
          }
          this.kaodian = res.data
        } else {
          this.$message.error(res.msg)
        }
      } else {
        this.$message.error(list.msg)
      }
      this.loading = false
    },
    getAttr (obj, name) {
      return obj[name]
    }
  },
  mounted () {
    this.initData()
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
.nva_menu_container .container
  width 96%
  margin-left 10px
  .print
    display inline-block
    width 94px
    height 32px
    background color
    color #fff
    text-decoration none
    text-align center
    line-height 32px
    border-radius 5px
  .exam-info
    width 100%
    height 48px
    line-height 48px
    background #3d68d5
    position: relative;
    top: 26px;
    p
      span
        margin-left 20px
        color #fff
        font-size 12px
        font-weight bold
      a
        float right
        margin-right 40px
        color #fff
        font-size 12px
        text-decoration none
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
          line-height 48px
          text-align center
    tbody
      &:nth-child(2n+1)
        tr
          background #f9faff
      tr
        td
          height 46px
          font-size 14px
          line-height 46px
          text-align center
          vertical-align middle
.exam-container
  margin-bottom 20px
</style>
